<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--[if lt IE 9]><!-->
		<script src="http://code.jquery.com/jquery-1.11.3.min.js "></script>
		<!--<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>
		<!--<![endif]-->
		<script>
			$(document).ready(function() {
				$("button.btn1").click(function() {
					var btn = $(this).text();
					$(btn).css("background-color", "yellow");
				});
				$("button.btn2").click(function() {
					var btn = $(this).text();
					$(btn).css("background-color", "orange");
				});
				$("button.btn3").click(function() {
					var btn = $(this).text();
					$(btn).css("background-color", "blueviolet");
				});
				$("button.btn4").click(function() {
					var btn = $(this).text();
					$(btn).wrap("<span style='background-color:red' />");
				});
				$("button.btn5").click(function() {
					var btn = $(this).text();
					$(btn).wrap("<span style='background-color:brown' />");
				});
				$("button.btn6").click(function() {
					var btn = $(this).text();
					$(btn).css("color", "blueviolet");
				});
				$("button.btn7").click(function() {
					var btn = $(this).text();
					$(btn).css("border", "solid blueviolet");
				});
				$("button.btn8").click(function() {
					var btn = $(this).text();
					$(btn).css("background-color", "thistle");
				});
				$("button.btn9").click(function() {
					var btn = $(this).text();
					$(btn).css("background-color", "burlywood");
				});
				$("button.btn10").click(function() {
					var btn = $(this).text();
					$(btn).css("background-color", "tan");
				});
				$("button.btn11").click(function() {
					var btn = $(this).text();
					$(btn).css("color", "tan");
				});
				$("button.btn12").click(function() {
					var btn = $(this).text();
					$(btn).wrap("<span style='background-color:tan' />");
				});
			});

			function refresh() {
				window.location.reload();
			}
		</script>
	</head>

	<body>
		<button class="btn1">:input</button>
		<button class="btn2">:text</button>
		<button class="btn3">:password</button>
		<button class="btn4">:radio</button><br>
		<button class="btn5">:checkbox</button>
		<button class="btn6">:button</button>
		<button class="btn7">:image</button>
		<button class="btn8">:file</button><br>
		<button class="btn9">:enabled</button>
		<button class="btn10">:disabled</button>
		<button class="btn11">:selected</button>
		<button class="btn12">:checked</button>

		<form action="">
			用户名: <input type="text" name="user"><br> 密码: <input type="password" name="password"><br> 年龄：
			<select disabled="disabled">
				<option>20-30</option>
				<option>30-50</option>
				<option>50+</option>
			</select><br />
			<input type="radio" name="sex" value="m">男<br>
			<input type="radio" name="sex" value="f">女<br>

			<input type="checkbox" name="vehicle" value="Bike">我有一辆自行车<br>
			<input type="checkbox" name="vehicle" value="Car" checked="checked">我有一辆汽车<br>
			<input type="checkbox" name="vehicle" value="Airplane">我有一架飞机<br>
			<button type="button">没用的按钮</button>
			<input type="button" value="另外一个没用的按钮"><br>
			<input type="reset" value="重置" onclick="refresh()">
			<input type="submit" value="提交"><br> 兼容性: <input type="image" src="../img/dishu.jpg" width="31" height="30"><br> 文件: <input type="file" name="myfile"><br> 汽车品牌:
			<select>
				<option>Volvo</option>
				<option selected="selected">Saab</option>
				<option>Mercedes</option>
				<option>Audi</option>
			</select>
		</form>
	</body>

</html>